import React,{Component} from 'react'

import {Head,Label} from '../../common/common'

import Type from './type'

import {Tag,Icon,Button,Modal,Input,message } from 'antd'

import './index.styl'

message.config({
    maxCount: 1,
  });
const { TextArea } = Input;


class Typeli extends Component{
    constructor(props){
        super(props);
        this.state={
            data:props.data,
            speciaArr:props.speciaArr,
            ishow:false,
            cloesable:false 
        }
    }
    delete(arr,item){
        let oIndex=arr.indexOf(item)
        let newarr=arr.splice(oIndex,1)
        this.props.update(arr,newarr)
    }
    handledtor(arr,type){
        if(arr.length>0){
            this.setState(prevState=>({
                [type]:!prevState[type]
            }))
        } 
    }
    dele(arr,item){
        let oIndex=arr.indexOf(item)
        let newarr=arr.splice(oIndex,1)
        this.props.upda(arr,newarr)
    }
    render(){

        return(
            <div className="ty-li">
            <label className="require">商品规格</label>
            <div className="type">
                <div className="head">
                    <div className="type-tit">规格</div>
                    <div className="type-val">规格值</div>
                </div>
                <div className="con">
                    <div className="type-l">
                    {
                        this.state.data.map((item,index)=>(
                            <div className="type-list" key={index}>
                                {item}
                                <span onClick={(item)=>this.delete(this.state.data,item)} className={this.state.ishow?'':'hide'}>x</span>
                            </div>
                        ))
                    }

                    </div>
                    <div className="type-r">
                    {
                            this.state.speciaArr.map((item)=>(
                                <Tag closable={this.state.cloesable} onClose={(arr,item)=>this.dele(this.state.speciaArr,item)}>{item}</Tag>
                            ))
                        }
                    </div>
                </div>
                <div className="footer">
                    <div className="type-tit">
                        <div onClick={this.props.onClick}><Icon type="plus" />增加属性</div>
                        <div  onClick={(type)=>this.handledtor(this.state.data,'ishow')}>编辑</div>
                    </div>
                    <div className="type-val" onClick={(type)=>this.handledtor(this.state.speciaArr,'cloesable')}>编辑</div>
                </div>
            </div>
        </div>
        )
    }
}


class NewBuuld extends Component{
    constructor(props){
        super(props)
        this.state={
            level1Arr:['家具','灯具','厨卫','软氏'],
            level2Arr:['家具','灯具','厨卫','软氏'],
            level3Arr:['家具','灯具','厨卫','软氏'],
            speciarr:['颜色','尺寸','图案'],
            shipArr:['材质','区域'],
            serveList:['服务安装','送货上门','三年质保','7天包退换'],
            marketList:['口碑好货','运费险','报价180天'],
            visible: false,
            speciaArr:[],
            attrArr:[],
            type:2,
            oValue:"",
            typeda:''

        }
    }
    //模态框
    showModal = (type) => {
        this.setState({
          visible: true,
          type:type,
          oValue:"",
          typeda:''
        });

      }
    //模态框确定
      handleOk = (e) => {
        this.setState({
          visible: false,
        });
        if(this.state.type===0){
            this.handleAdd(this.state.shipArr,this.state.oValue)
            this.handleAdd(this.state.attrArr,this.state.typeda)
        }else if(this.state.type===1){
            this.handleAdd(this.state.speciaArr,this.state.oValue)
            this.handleAdd(this.state.speciarr,this.state.typeda)
        }else if(this.state.type===2){
            this.handleAdd(this.state.serveList,this.state.oValue)
        }else if(this.state.type===3){
            this.handleAdd(this.state.marketList,this.state.oValue)
        }
        
      }
    //模态框取消
      handleCancel = (e) => {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
      //input输入框 
    handleInput(e){
        this.setState({
            [e.target.name]: e.target.value,
          });
      }
    onChange1(id){
        console.log(id)
    }
    //添加
    handleAdd(arr,item){
        if(this.state.oValue==="" || this.state.typeda===""){
            return message.warning('不能添加为空');
        }
        let itemarr=item.split('\n')
        itemarr.map((item)=>{
            if(arr.indexOf(item)===-1){
                 arr.push(item)
            }else{
                message.warning('添加重复了');
            }
        }    
        )
        this.setState({
            arr:arr
        })
    }
    //模态框
    fnshow(){
        if(this.state.type===2 || this.state.type===3){
            return(
                <div className="build-modal">
                    <div className="title">增加服务标签</div>
                    <div className="modal-li">
                        <label className="require">标签名称</label>
                        <Input name="oValue" value={this.state.oValue} onChange={(e)=>this.handleInput(e)}/>
                    </div>
                </div>
            )
        }else{
            return(
                <div className="build-modal">
                    <div className="title">增加规格标签</div>
                    <div className="modal-li">
                        <label className="require">规格名称</label>
                        <Input  name="typeda" value={this.state.typeda} onChange={(e)=>this.handleInput(e)}/>
                    </div>
                    <div className="modal-li">
                        <label className="require">规格值</label>
                        <div>
                            <p>一行代表一个可选值</p>
                            <TextArea name="oValue" value={this.state.oValue} onChange={(e)=>this.handleInput(e)}/>
                        </div>
                    </div>
                </div>
            )
        }
    }
    handledtor(type){
        this.setState({
            type:type
        })
    }
    update(type,arr){
        this.setState({
            type:arr
        })
    }
    delete(arr,item){
        let oIndex=arr.indexOf(item)
        let newarr=arr.splice(oIndex,1)
        this.setState({
            arr:newarr
        })
    }
    render(){
        let speciaArr=this.state.speciaArr;
        let attrArr=this.state.attrArr;
        return(
            <div className="men-con">
                <Head name="新建模板"></Head>
                <div className="form-info">
                    <Label name="模板名称" className="require"></Label>
                    <div className="ty-li">
                        <label className="require">商品类目</label>
                        <div className="ship-type">
                            <div className="head">一级类目</div>
                            <div className="con-list">
                            {this.state.level1Arr.map((item,index)=>(
                                <label className="li"  key={index}>
                                <input type="radio" name="level1" onChange={(id)=>this.onChange1(this)} value="灯具"/>
                                <div>{item}</div>
                                </label>
                            ))}
                            </div>
                        </div>
                        <div className="ship-type">
                            <div className="head">一级类目</div>
                            <div className="con-list">
                            {this.state.level1Arr.map((item,index)=>(
                                <label className="li" key={index}>
                                <input type="radio" name="level1" onChange={(id)=>this.onChange1(this)} value="灯具"/>
                                <div>{item}</div>
                                </label>
                            ))}
                            </div>
                        </div>
                        <div className="ship-type">
                            <div className="head">一级类目</div>
                            <div className="con-list">
                            {this.state.level1Arr.map((item,index)=>(
                                <label className="li"  key={index}>
                                <input type="radio" name="level1" onChange={(id)=>this.onChange1(this)} value="灯具"/>
                                <div>{item}</div>
                                </label>
                            ))}
                            </div>
                        </div>
                    </div>
                    <Typeli data={this.state.speciarr} onClick={(type)=>this.showModal(1)} update={(type,arr)=>this.update(this.state.speciarr,arr)}
                     speciaArr={speciaArr} upda={(type,arr)=>this.update(this.state.speciaArr,arr)}></Typeli>
                    <Typeli data={this.state.shipArr} onClick={(type)=>this.showModal(0)} update={(type,arr)=>this.update(this.state.shipArr,arr)}
                     speciaArr={attrArr} upda={(type,arr)=>this.update(this.state.attrArr,arr)}></Typeli>
                    <div className="ty-serv">
                        <Type serveList={this.state.serveList} onClick={(type)=>this.showModal(2) } update={(type,arr)=>this.update(this.state.serveList,arr)}></Type>
                        <Type serveList={this.state.marketList} onClick={(type)=>this.showModal(3) } update={(type,arr)=>this.update(this.state.marketList,arr)}></Type>
                       
                    </div>
                <div className="type-btn">
                    <Button type="primary">提交</Button>
                    <Button>取消</Button>
                </div>
                </div>
                <Modal visible={this.state.visible} onOk={this.handleOk}
                onCancel={this.handleCancel}>
                        {this.fnshow()}
                </Modal>
            </div>
        )
    }
}
export default NewBuuld